<template>
  <div class="home">
    <!-- 顶部 -->
    <div class="homeHeader">
      <!-- 搜索区 -->
      <van-search
        v-model="value"
        shape="round"
        placeholder="请输入搜索关键词"
        @click="goSearch"
      />
      <!-- tab切换区 -->
      <van-tabs v-model="active" swipeable @click="clickTabList">
        <van-tab
          v-for="item in rankCategoryList"
          :key="item.id"
          :title="item.name"
          :name="item.id"
        ></van-tab>
      </van-tabs>
    </div>
    <!-- 主题区 -->
    <div class="homeMain">
      <!-- banner -->
      <div class="banner swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in carouselList" :key="item">
            <img :src="item.image" alt="" />
          </div>
        </div>
      </div>
      <!-- icon list -->
      <div class="homeClassify">
        <dl v-for="item in dataList" :key="item.id" @click="goDetail(item.id)">
          <dt><img :src="item.image" alt="" /></dt>
          <dd>{{ item.name }}</dd>
        </dl>
      </div>

      <!-- 当前城市 -->
      <div class="currentCity">
        <div class="city">
          <span><van-icon name="location-o" />郑州</span>
          <van-icon name="arrow" />
        </div>
        <!-- 城市展示 -->
        <div class="showCity">
          <dl v-for="item in currentCity" :key="item.id">
            <dt>
              <img :src="item.image" alt="" />
              <span>{{ item.tag }}</span>
            </dt>
            <dd>{{ item.name }}</dd>
          </dl>
        </div>
      </div>

      <!-- video -->
      <div class="video">
        <!-- tab切换 -->
        <van-tabs v-model="active">
          <van-tab title="严选最新"></van-tab>
          <van-tab title="一周排名"></van-tab>
          <van-tab title="每月排名"></van-tab>
          <van-tab title="北京"></van-tab>
          <van-tab title="官方"></van-tab>
        </van-tabs>
        <!-- 视频 -->
        <div class="info">
          <dl v-for="item in videoList" :key="item.id">
            <dt>
              <video
                @click="play(index)"
                class="home-video"
                loop
                muted
                :poster="item.image"
                controls="controls"
              >
                <source :src="item.video" type="video/mp4" />
              </video>
            </dt>
            <dd>
              <p>{{ item.title }}</p>
              <p>
                <span><img :src="item.avatar" alt="" />{{ item.nickname }}</span
                ><span style="color: #ccc">推荐值：{{ item.score }}</span>
              </p>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, ref } from "vue";
//引用vuex
import { useStore } from "vuex";
//引用router
import { useRouter } from "vue-router";

export default defineComponent({
  name: "Home",
  setup() {
    let store = useStore();
    let router = useRouter();
    let value = ref("");
    let id = 0;
    //视屏数据组成的数组
    let videoArr = [
      {
        title: "推荐",
        val: {
          mid: 0,
          rankCategoryId: 0,
          pageNo: 1,
          orderBy: 1,
          filter: "",
        },
      },
      {
        title: "生活",
        val: {
          mid: 0,
          rankCategoryId: "f377304d1ac5412aa8419095b10dd36e",
          pageNo: 1,
          orderBy: 1,
          filter: "",
        },
      },
      {
        title: "学校",
        val: {
          mid: 0,
          rankCategoryId: "f377304d1ac5412aa8419095b10dd36e",
          pageNo: 1,
          orderBy: 1,
          filter: "",
        },
      },
      {
        title: "数码",
        val: {
          mid: 0,
          rankCategoryId: 0,
          pageNo: 2,
          orderBy: 1,
          filter: "",
        },
      },
      {
        title: "竞技",
        val: {
          mid: 0,
          rankCategoryId: 0,
          pageNo: 1,
          orderBy: 2,
          filter: "",
        },
      },
      {
        title: "商业",
        val: {
          mid: 0,
          rankCategoryId: 0,
          pageNo: 1,
          orderBy: 3,
          filter: "",
        },
      },
      {
        title: "汽车",
        val: {
          mid: 0,
          rankCategoryId: 0,
          pageNo: 1,
          orderBy: 3,
          filter: 2,
        },
      },
      {
        title: "影音",
        val: {
          mid: 0,
          rankCategoryId: 0,
          pageNo: 1,
          orderBy: 3,
          filter: 1,
        },
      },
      {
        title: "影音",
        val: {
          mid: 0,
          rankCategoryId: "f377304d1ac5412aa8419095b10dd36e",
          pageNo: 1,
          orderBy: 1,
          filter: "",
        },
      },
    ];
    //tab
    store.dispatch("home/getHomeLists", { mid: 0 });
    //tab切换对应数据
    store.dispatch("home/getTabLists", { mid: 0, rankCategoryId: id });
    //轮播图
    store.dispatch("home/getBannerLists", { mid: 0 });
    //城市
    store.dispatch("home/getCurrentCitys", {
      mid: 0,
      rankCategoryId: 0,
      city: "郑州市",
      pageNo: 1,
    });
    //顶层tab切换 icon数据区 和 视频区对应数据
    function clickTabList(name, title) {
      id = name;
      // icon数据区数据
      store.dispatch("home/getTabLists", { mid: 0, rankCategoryId: id });
      //视频区数据  原理：利用tab切换的title，来筛选videoArr中的title所对应的val，也就是分页请求的实参数据；
      store.dispatch(
        "home/getVideoLists",
        videoArr.filter((item) => item.title == title)[0].val
      );
    }
    //点击跳转详情
    function goDetail(idq) {
      store.dispatch("Classify/getClassDropList", { mid: 0, rankId: idq });
      store.dispatch("Classify/getClassDetail", {
        mid: 0,
        drops: "",
        rankId: idq,
      });
      router.push("/classify");
    }
    //手动播放暂停
    const homeVideo = document.getElementsByClassName("home-video");
    const play = (i) => {
      if (homeVideo[i].paused) {
        homeVideo[i].play();
      } else {
        homeVideo[i].pause();
      }
    };
    //跳搜索
    function goSearch() {
      router.push("/search");
    }
    return {
      value,
      goDetail,
      clickTabList,
      homeVideo,
      play,
      goSearch, //搜索
      rankCategoryList: computed(() => store.state.home.rankCategoryList), //tab
      dataList: computed(() => store.state.home.dataList), //tab对应列表
      carouselList: computed(() => store.state.home.carouselList), //轮播图
      currentCity: computed(() => store.state.home.currentCity), //城市
      videoList: computed(() => store.state.home.vadioList), //视频
    };
  },
});
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 0.14rem;
}
.homeHeader {
  width: 100%;
}
.homeMain {
  flex: 1;
  overflow: auto;

  .banner {
    width: 100%;
    margin: 0.2rem 0;
    .swiper-wrapper,
    .swiper-slide {
      width: 100%;
      display: flex;
      justify-content: center;
      img {
        width: 95%;
        height: 8rem;
        border-radius: 0.1rem;
      }
    }
  }

  .homeClassify {
    box-shadow: 2px 2px 2px #ccc;
    width: 95%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    margin: auto;
    dl {
      width: calc(100% / 4);
      margin: 1rem 0;
      text-align: center;
      dt {
        width: 100%;
        margin: 0.1rem 0;
        img {
          width: 50%;
        }
      }
    }
    dd {
      line-height: 1.4rem;
    }
  }

  .currentCity {
    border: 1px solid #ccc;
    width: 95%;
    border-radius: 0.5rem;
    margin: 0.2rem auto;
    .city {
      width: 100%;
      height: 2.8rem;
      line-height: 1.8rem;
      // border-bottom: 0.01rem solid #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 2px 2px 2px #ccc;
      span {
        margin: 0 0.15rem;
        display: flex;
        align-items: center;
        > .van-icon {
          font-size: 0.3rem;
          margin: 0 0.1rem;
          font-weight: 800;
        }
      }
      > .van-icon {
        margin: 0 0.15rem;
        font-size: 0.3rem;
      }
    }
    .showCity {
      width: 100%;
      height: 6rem;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      box-shadow: 2px 2px 2px #ccc;
      dl {
        width: calc(100% / 4);
        margin: 1rem 0;
        text-align: center;
        dt {
          height: 3rem;
          width: 100%;
          margin: 0.1rem 0;
          img {
            width: 50%;
            height: 2.5rem;
          }
        }
      }
      dd {
        line-height: 1.4rem;
      }
    }
  }
  .info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    dl {
      width: 47%;
      height: 15rem;
      margin-top: 1rem;
      border-radius: 10px;
      box-shadow: 0 25px 30px rgba(77, 73, 74, 0.6);
      dt {
        width: 100%;
        height: 60%;
        position: relative;
        video {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          object-fit: fill;
          border-radius: 10px 10px 0 0;
        }
      }
      dd {
        width: 100%;
        p {
          margin-top: 10px;
          font-size: 13px;
          font-weight: 800;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 0 5px;
        }
        p:nth-child(2) {
          display: flex;

          justify-content: space-between;
          align-items: center;
          span {
            text-align: center;
          }
          img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>
